<template>
  <div class="course">
    <Header></Header>
    <div class="bgcolor">
      <div class="wrap">
        <h4 class="font24">{{ title }}</h4>
        <div class="public">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程章节" name="first">
              <ul  class="list" v-for="(item,index) in courseList" :key="index">
                <li @click="jump(item.id,item.name)"> {{item.name}}
                  <span class="doing">({{item.plan_str}}) 已学{{item.plan}}%</span>
                   <!-- <span class="done">(完成学习)</span> -->
                </li>
              </ul>
              <div style="text-align: center; padding: 30px 0" v-if="courseList">
                <el-button type="info"
                  >参加考试(未完成学习,不能参加考试)</el-button
                >
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程评论" name="second">
              <div class="comment-list">
                <el-input
                  type="textarea"
                  v-model="form.desc"
                  placeholder="请输入评论内容"
                  :autosize="{ minRows: 8, maxRows: 10 }"
                  maxlength="100"
                  show-word-limit
                ></el-input>
                <div class="flexbox" style="margin: 20px auto">
                  <div>
                    请您评分
                    <el-rate
                      v-model="star"
                      void-color="#ccc"
                      style="display: inline-block"
                    ></el-rate>
                  </div>
                  <el-button @click="getcomment()" type="primary" round style="padding: 7px 20px"
                    >发布评论</el-button
                  >
                </div>
                <p class="all_cmt">全部评论 ({{cmtList?cmtList.length:'0'}})</p>
                <ul>
                  <li v-for="(item,index) in cmtList" :key="index">
                    <div class="inner">
                      <div class="who">
                        <img  class="avtar" :src="item.avatar" :alt="item.name"/>
                      </div>

                      <p><span style="font-size: 20px">{{item.name}}</span></p>
                      <div class="cmt-date col9">2020-09-19 00:30:43</div>
                      <p class="cmt-txt">
                        {{item.content}}
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/layout/header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      pid:0,
      courseList:[],
      cmtList:[],
      activeName: "first",
      pid:0,
      star: 5,
      title: "",
      form: {
        desc: "",
      },
      id:''
    };
  },
  mounted() {
    console.log("1111",this.$route.query.pid)
    this.pid = this.$route.query.pid
    this.id = this.$route.query.id
    this.title = this.$route.query.name
    this.getList()
    // this.commentList()
  },
  methods:{
      handleClick(val) {
      let name = val.name;
      if (name == "first") {
        this.getList();
      } else {
        this.commentList();
      }
    },
      
    getList(){
      this.$axios.post("/api/Course/getSubject",{pid:this.id}).then(res=>{
         this.courseList = res.data.data
        //  console.log(res.data)
      })
    },
   jump(id,name){
     this.$router.push({
        path:'videoCourse',
        query:{id:id,lm_id:this.id,pid:this.pid,name:name}
     })
   },
    getcomment(){
      this.$axios.post("/api/User/comment",{content:this.form.desc,mark:this.star,lm_id:this.id}).then(res=>{
        if(res.data.status==500){
        //   this.$Notice.open({
        //   title: "报名",
        //   duration: 2 //n秒后消失
        // });
        }
        console.log(res.data.status)
        this.commentList()
      })
    },
    commentList(){
      this.$axios.post('/api/User/kcdetail',{lm_id:this.id,xy_id: this.pid}).then(res=>{
        this.cmtList = res.data.data.commont_list
        // console.log(this.details)
      })
    },
  }
};
</script>
<style  scoped>
.bgcolor {
  background: #f5f5f5;
  padding: 30px 0;
}
.public {
  background: #fff;
  padding: 30px 20px;
  margin-top: 20px;
}
.public h5 {
  font-size: 18px;
  font-weight: normal;
  margin: 20px auto;
}
.public h5::before {
  content: "";
  width: 3px;
  height: 18px;
  display: inline-block;
  background: #4398f8;
  margin-right: 15px;
  vertical-align: middle;
}
.public dl dt {
  margin-bottom: 20px;
}
.public dl dd {
  line-height: 28px;
  color: #999;
}
.public dl dd.tit {
  display: table-cell;
}
.yellow {
  background-color: #F09C08;
  font-size: 16px;
}
.list li {
  padding: 15px 10px;
  font-size: 16px;
  cursor: pointer;
}
.done {
  color: #137AB5;
}
.doing {
  color: #F39A24;
}
.all_cmt {
  background: #F7F7F7;
  margin: 20px auto;
  padding: 10px 0;
  text-align: center;
}
.comment-list ul li {
  position: relative;
  border-bottom: 1px solid #e6e6e6;
  padding: 20px 0;
}
.who {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  margin: 0 auto;
  text-align: center;
}
.avtar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding-bottom: 10px;
  margin: 0 auto;
}
.cmt-txt {
  margin: 10px 0 20px;
}
.inner {
  position: relative;
  padding-left: 90px;
}
.cmt-date {
  padding-top: 10px;
}
</style>